<template>
  <div class="container">
    <el-card class="boxCard">
      <!-- 新增按钮 -->
      <el-row class="newBut">
        <el-button type="success" icon="el-icon-edit" @click="addListQuestion"
          >新增试题</el-button
        >
      </el-row>
      <!-- 选项框 -->
      <el-form :model="isAll" label-width="120px" ref="refAll">
        <!-- 顶 -->
        <el-row class="oneUp" justify="space-around" style="display: 'inline'">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width='30%'"
                v-model="isAll.subjectID"
                placeholder="请选择"
                @change="reqtory"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="isAll.catalog"
                style="width='30%'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in catalogList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="isAll.tags"
                style="width='30%'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in labelList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                style="width='30%'"
                v-model="isAll.keyword"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 中 -->
        <el-row class="oneUp" justify="space-around" style="display: 'inline'">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="isAll.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionTypeRee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="isAll.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="isAll.direction" placeholder="请选择">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="isAll.creatorID"
                style="width='50%'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in entryPersonList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 下 -->
        <el-row class="oneUp" justify="space-around" style="display: 'inline'">
          <el-col :span="6">
            <el-form-item label="标题备注">
              <el-input
                v-model="isAll.remarks"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                v-model="isAll.shortName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="">
            <el-col :span="24">
              <el-col :span="7">
                <el-form-item label="城市"> </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-select
                  v-model="isAll.province"
                  placeholder="请选择"
                  @change="reqprovinces"
                >
                  <el-option
                    v-for="item in provincesList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>

              <el-col :span="6">
                <el-select v-model="isAll.city" placeholder="请选择">
                  <el-option
                    v-for="item in citysList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-col>

          <el-col :span="6" :push="4">
            <el-button @click="clearAll">清除</el-button>
            <el-button @click="searchAll">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert type="info" show-icon>
        <template> 数据一共 {{ counts }} 条 </template>
      </el-alert>
      <el-form>
        <el-table :data="basicQuestionBankList" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="180"
          ></el-table-column>
          <el-table-column prop="catalog" label="目录" width="180">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100">
            <template #default="{ row }">
              {{ questionTypeAll(+row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="280">
            <template #default="{ row }">
              {{ questionAll(row.question) }}
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度" width="100">
            <template #default="{ row }">
              {{ difficultyAll(+row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="180">
          </el-table-column>
          <el-table-column label="操作" width="400">
            <template #default="{ row }">
              <el-button
                circle
                icon="el-icon-view"
                @click="upPreviewEffect(row)"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="gotoMenu(row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteIs(row.id)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="addIs(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[2, 5, 8, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-form>
    </el-card>
    <!-- 预览框 -->
    <el-dialog
      title="预览"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisibleFalse"
    >
      <el-descriptions :column="column" title="">
        <el-descriptions-item label="【题型】">{{
          txStr
        }}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{
          bhStr
        }}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{
          knStr
        }}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{
          bqStr
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="column" title="">
        <el-descriptions-item label="【学科】">{{
          xkStr
        }}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{
          mlStr
        }}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{
          fxStr
        }}</el-descriptions-item>
      </el-descriptions>
      <hr />

      <el-descriptions :colon="false" :column="1" :span="2" title="">
        <el-descriptions-item label="【题干】"></el-descriptions-item>
        <el-descriptions-item>{{ tgStr }}</el-descriptions-item>
        <el-descriptions-item v-for="item in options" :key="item.id">
          <el-radio
            :label="1"
            :value="item.isRight"
            v-if="asdasd === '1'"
            style="width: 100%; padding: 10px 0"
            >{{ item.title }}</el-radio
          >
          <el-checkbox
            v-if="asdasd === '2'"
            :value="item.isRight ? true : false"
            >{{ item.title }}</el-checkbox
          >
          <el-input v-if="asdasd === '3'">{{ item.title }}</el-input>
        </el-descriptions-item>
      </el-descriptions>

      <hr />
      <el-descriptions :colon="false" :column="1" :span="2" title="">
        <el-descriptions-item label="【参考答案】"
          ><el-button type="danger" size="small" @click="upVideo"
            >视频答案预览</el-button
          ></el-descriptions-item
        >
        <el-descriptions-item v-if="upVioo"
          ><video
            controls
            autoplay
            width="430"
            height="300"
            :src="videoUrl"
          ></video
        ></el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions :column="1" :span="2" title="">
        <el-descriptions-item label="【答案解析】">{{
          dnjxStr
        }}</el-descriptions-item>
      </el-descriptions>
      <hr />
      <el-descriptions :column="1" :span="2" title="">
        <el-descriptions-item label="【标题备注】">{{
          btbzStr
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleFalse">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleFalse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { simple as dirsimple } from '@/api/hmmm/directorys.js'
import { list as tagslist } from '@/api/hmmm/tags.js'
import {
  questionType as questionTypeRee,
  difficulty,
  direction
} from '@/api/hmmm/constants.js'
import { list as userslist } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  list as reqQuestionBankList,
  remove,
  choiceAdd,
  detail
} from '@/api/hmmm/questions.js'
export default {
  name: 'Questions',
  data () {
    return {
      checkList: '', // 多选框
      radio: '', // 单选框
      column: 4,
      isAll: {
        subjectID: null, // 学科
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        city: null,
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 标题备注
        shortName: null, // 企业简称
        province: null,
        catalogID: null
      },
      catalog: '', //  二级目录
      subjectList: [], //  学科
      catalogList: [], // 二级目录
      labelList: [], // 标签
      questionTypeRee, //  试题 提醒
      difficulty, // 难度
      allBankList: null,
      direction, // 方向
      entryPersonList: [], // 录入人
      provincesList: [], // 所有城市
      citysList: [], // 城市下地区
      basicQuestionBankList: [], // 基础题库列表
      pageSize: 2, // 每页显示个数
      currentPage4: 1, // 当前页
      counts: null,
      dialogVisible: false,
      txStr: '',
      bhStr: null,
      knStr: '',
      bqStr: '',
      xkStr: '',
      mlStr: '',
      fxStr: '',
      tgStr: '',
      videoUrl: '',
      dnjxStr: '',
      btbzStr: '',
      txStrs: null,
      upVioo: false,
      options: [], // 答案
      asdasd: ''
    }
  },
  created () {
    // 学科
    this.reqSubjectList()
    // 用户列表
    this.reqUsersList()
    // 所有城市
    this.getallprovinces()
    // 基础题库列表
    this.reqbasicQuestionBankList()
  },
  methods: {
    // 学科列表
    async reqSubjectList () {
      const {
        data: { items }
      } = await list()
      // console.log(items)
      this.subjectList = items
    },
    // 实时监听 获取 二级目录----标签列表
    async reqtory (e) {
      // 二级目录
      console.log(e)
      const { data } = await dirsimple({ subjectID: e })
      console.log(data)
      this.catalogList = data
      // 标签列表
      const {
        data: { items }
      } = await tagslist({ subjectID: e })
      console.log(items)
      this.labelList = items
    },
    // 录入人
    async reqUsersList () {
      const {
        data: { list }
      } = await userslist()
      // console.log(list)
      this.entryPersonList = list
    },
    // 获取所有城市
    getallprovinces () {
      const res = provinces()
      // console.log(res)
      this.provincesList = res
    },
    // 获取所有城市下的地区
    reqprovinces (val) {
      const res = citys(val)
      console.log(res)
      this.citysList = res
    },
    // 清除
    clearAll () {
      this.isAll = {
        subject: '', // 学科
        catalog: '', //  二级目录
        labelLiss: '', // 标签
        keywords: '', // 关键字
        questiontypess: '', // 试题类型
        difficultyss: '', // 难度
        citysss: '',
        directionss: '', // 方向
        entryPerson: '', // 录入人
        titleNote: '', // 标题备注
        enterpriseAbbreviation: '', // 企业简称
        provincesss: ''
      }
      this.catalogList = []
    },
    // 搜索
    searchAll () {
      console.log(this.isAll)
      this.reqbasicQuestionBankList()
    },
    // 视频显示
    upVideo () {
      this.upVioo = true
    },
    dialogVisibleFalse () {
      this.upVioo = false
      this.$nextTick(() => {
        this.dialogVisible = false
      })
    },
    // 获取基础题库列表
    async reqbasicQuestionBankList () {
      // { page: this.currentPage, pagesize: this.pageSize }
      const { data } = await reqQuestionBankList({
        page: this.currentPage4,
        pagesize: this.pageSize,
        ...this.isAll
      })
      console.log(data)
      this.counts = data.counts
      this.basicQuestionBankList = data.items
    },
    // 题目类型  转换
    questionTypeAll (val) {
      // console.log(val)
      const bpo = questionTypeRee.find((item) => {
        console.log(item)
        if (val === item.value) {
          // console.log(item.label)
          // this.knStr = item.label
          return item.label
        }
      })
      return bpo.label
    },
    // 难度
    difficultyAll (val) {
      // console.log(val)
      const bpo = difficulty.find((item) => {
        // console.log(item.label)
        if (val === item.value) {
          // console.log(item.label)
          return item.label
        }
      })
      return bpo.label
    },
    // 去除 P 标签
    questionAll (val) {
      return val.replace(/<\/?.+?>/g, '')
    },
    //  改变每页  条数
    handleSizeChange (val) {
      this.pageSize = val
      this.reqbasicQuestionBankList()
      console.log(`每页 ${val} 条`)
    },
    // 改变页数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage4 = val
      this.reqbasicQuestionBankList()
    },
    // 点击预览
    async upPreviewEffect (val) {
      console.log(val)
      this.asdasd = val.questionType
      this.txStr = this.questionTypeAll(+val.questionType)
      this.txStrs = +val.questionType
      console.log(+val.questionType)
      this.bhStr = val.id
      // this.knStr = this.difficultyAll(+val.difficulty)
      this.bqStr = val.tags
      this.xkStr = val.subject
      this.mlStr = val.catalog
      this.fxStr = val.direction
      this.tgStr = this.questionAll(val.question)
      this.dnjxStr = this.questionAll(val.answer)
      this.btbzStr = val.remarks
      // detail()
      const { data } = await detail({ id: val.id })
      this.options = data.options
      console.log(data.options)
      this.videoUrl = data.videoURL
      difficulty.filter((item) => {
        // console.log(item)
        // console.log(this.difficultyAll(+val.difficulty))
        if (+val.difficulty === item.value) {
          console.log(item.label)
          this.knStr = item.label
        }
      })
      questionTypeRee.filter((item) => {
        console.log(item)
        if (+val.questionType === item.value) {
          console.log(item.label)
          this.txStr = item.label
        }
      })
      this.dialogVisible = true
    },
    // 跳转 修改
    gotoMenu (val) {
      console.log(val)
      this.$router.push(`/questions/new?id=${val}`)
    },
    // 删除
    async deleteIs (val) {
      console.log(val)
      const res = await this.$confirm(
        '此操作将永久删除该题, 是否继续?',
        '提示',
        {
          type: 'warning'
        }
      ).catch(() => {})
      if (res !== 'confirm') return this.$message.info('已取消')
      const boo = await remove({ id: val })
      console.log(boo)
      if (this.basicQuestionBankList.length === 1 && this.currentPage4 > 1) {
        this.currentPage4--
      }
      this.reqbasicQuestionBankList()
    },
    // 移入
    async addIs (val) {
      const res = await this.$confirm(
        '此操作将永久移入精品数据库, 是否继续?',
        '提示',
        {
          type: 'warning'
        }
      ).catch(() => {})
      if (res !== 'confirm') return this.$message.info('已取消')
      const boo = await choiceAdd({ id: val, choiceState: 1 })
      console.log(boo)
      this.reqbasicQuestionBankList()
    },
    // 新增试题 跳转
    addListQuestion () {
      this.$router.push('/questions/new')
    }
  }
}
</script>
<style  lang='scss' scoped>
.container {
  padding: 10px 10px;
  .boxCard {
    padding: 10px 10px;
    .newBut {
      // overflow: hidden;
      // float: right;
      text-align: right;
      padding: 0 0 20px 0;
    }
    .oneUp {
      padding: 5px 10px;
    }
  }
}
</style>
